<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-select
        v-model="listQuery.shopName"
        clearable
        style="width: 200px"
        class="filter-item"
        placeholder="请选择项目"
        @change="selectProductType"
      >
        <el-option v-for="(item,index) in shopList" :key="index" :label="item.shopName" :value="{ value: item.id, label: item.shopName}" />
      </el-select>

      <el-button v-permission="['operation:groupShop:query']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >

      <el-table-column align="center" label="ID" prop="id" />

      <el-table-column align="center" min-width="100" label="打卡人" prop="realName" />
      <el-table-column align="center" min-width="100" label="项目名称" prop="shopName" />
      <el-table-column align="center" min-width="100" label="打卡地点" prop="address" />
      <el-table-column
        :formatter="formatDate"
        label="打卡时间"
        min-width="100"
        align="center"
        prop="gmtCreate"/>
      <el-table-column align="center" min-width="100" label="经纬度" prop="lgla" />
      <el-table-column align="center" width="80" prop="url" label="图片">
        <template scope="scope">
          <el-popover placement="right" title="" trigger="hover">
            <img :src="scope.row.img" style="height: 400px;width: 500px">
            <img slot="reference" :src="scope.row.img" :alt="scope.row.img" style="max-height: 50px;max-width: 130px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['operation:groupShop:delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>

<style>
.table-expand {
  font-size: 0;
}

.table-expand label {
  width: 100px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}

.gallery {
  width: 80px;
  margin-right: 10px;
}
</style>

<script>
import { queryShopOne, deleteShopOne } from '@/api/shopone'
import BackToTop from '@/components/BackToTop'
import { spuTree } from '@/api/goods'
import { formatDateAndTime } from '@/filters'
import { clearTreeEmptyChildren } from '@/utils/index'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { selectShop } from '@/api/frontutil'

export default {
  name: 'GoodsList',
  components: { BackToTop, Pagination },
  filters: {
    formatGmt(time) {
      if (time == null || time === '') {
        return '无'
      }
      return formatDateAndTime(time)
    }
  },
  data() {
    return {
      list: [],
      shopList: [],
      total: 0,
      listLoading: true,
      dialogFormVisible: false,
      GroupShopStatusMap: [{ value: 0, name: '冻结' }, { value: 1, name: '活动' }],
      listQuery: {
        page: 1,
        limit: 20,
        shopName: undefined,
        status: undefined,
        id: undefined,
        shopId: undefined,
        type: 1
      },
      dialogStatus: 'create',
      rules: {},
      dataForm: {
        spuId: undefined
      },
      goodsOptions: [],
      goodsOption: undefined

    }
  },
  created() {
    this.listQuery.shopId = this.$route.query.shopId
    this.listQuery.shopName = this.$route.query.shopName
    this.getList()
    this.listShop()
  },
  methods: {
    listShop() {
      selectShop()
        .then(response => {
          this.shopList = response.data.data
        })
        .catch(() => {
        })
    },
    selectProductType(data) {
      const { value, label } = data
      this.listQuery.shopName = label
      this.listQuery.shopId = value
    },
    formatDate(row, column) {
      // 获取单元格数据
      const data = row[column.property]
      if (data == null) {
        return null
      }
      const dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    getList() {
      this.listLoading = true
      queryShopOne(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    refreshDataForm() {
      this.dataForm = {
        spuId: undefined

      }
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除商品--' + row.title + '--, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteShopOne(row.id)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      }).catch(() => {
        return false
      })
    },
    refreshGoodsOptions() {
      if (this.goodsOptions.length === 0) {
        spuTree().then(response => {
          this.goodsOptions = clearTreeEmptyChildren(response.data.data)
        })
      }
    }

  }
}
</script>
